<template>
    <div class="bodyDiv">
      <Header :position="position"></Header>
      <div class="left">
        <el-card style="width: 100%;height: 220px">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>数据统计</span>
          </div>
          <div style="display: flex; width: 100%;justify-content: space-around;margin-top: 10px;text-align: left">
            <div style=" ">
              <h3 style="margin: 0px">设备总数</h3>
              <h1 style="color: #000000;font-size: 70px;margin: 0px">{{current}}</h1>
            </div>
            <div style="">
              <h3 style="margin: 0px">运行设备</h3>
              <h1 style="color: #91cc75;font-size: 70px;margin: 0px">{{online}}</h1>
            </div>
            <div style="">
              <h3 style="margin: 0px">停用设备</h3>
              <h1 style="color: #5470c6;font-size: 70px;margin: 0px">{{offline}}</h1>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px;text-align: left">
          <!--          <div style="width: 100%;justify-content: center">
                      <div>
                        <p style="font-weight: bold;width: 100%;white-space: nowrap">在线离线统计:</p>
                        <el-divider style="width: 100%"></el-divider>
                      </div>
                    </div>-->
          <span style="margin-left: 30px;font-weight: bolder">运行比例统计</span>
          <annual-pie :series="pieData" style="height: 250px;width:100%;margin-top: -30px;margin-bottom: -10px"></annual-pie>
        </el-card>
        <el-card style="margin-top: 10px;text-align: left">
          <span style="margin-left: 30px;font-weight: bolder">每日变化折线</span>
          <line-histogram style="width: 100%;height: 297px;" :series="lineHistogramTestData"></line-histogram>
        </el-card>
      </div>
      <div class="right">
        <el-card style="height: 873px;text-align: left">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>设备管理</span>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 10px;">
            <div>
              <el-select placeholder="选择设备状态"></el-select>
              <el-select placeholder="选择设备类型" style="margin-left: 10px"></el-select>
            </div>
              <el-button type="primary" icon="el-icon-arrow-right">检索</el-button>
          </div>
          <el-table :data="testData"
                    style="width: 98%;"
                    stripe
                    highlight-current-row
                    height="670px"
                    ref="tableList">
            <el-table-column type="expand" label="展开" width="50px">
              <template slot-scope="props">
                <div style="width: 100%;">
                  <!--电量、运行时间、运行次数、停用次数、上次停用时间...-->
                  <div style="padding: 20px;width: 100%">





                    <div style="display: flex">
                      <div style="width: 60%;margin-top: 20px">
                        <span style="font-weight: bold">运行时间：</span>
                        <div style="display: flex">
                          <h1 style="color: #91cc75;font-size: 70px;font-weight: lighter;margin: 0px">
                            {{current}}
                            <span style="font-size: 20px;font-weight: normal;color: #000000">天</span>
                            {{current}}
                            <span style="font-size: 20px;font-weight: normal;color: #000000">小时</span>
                            {{current}}
                            <span style="font-size: 20px;font-weight: normal;color: black">分</span>
                          </h1>
                        </div>
                      </div>
                      <div style="width: 20%;margin-top: 20px;margin-left: 30px">
                        <span style="font-weight: bold;">运行次数：</span>
                        <h1 style="color: #91cc75;font-size: 70px;font-weight: lighter;margin: 00px">
                          {{current}}
                          <span style="font-size: 20px;font-weight: normal;color: black">次</span>
                        </h1>
                      </div>
                      <div style="width: 20%;margin-top: 20px">
                        <span style="font-weight: bold;">停用次数：</span>
                        <h1 style="color: #5470c6;font-size: 70px;font-weight: lighter;margin: 0px">
                          {{current}}
                          <span style="font-size: 20px;font-weight: normal;color: black">次</span>
                        </h1>
                      </div>
                    </div>

                    <div style="display: flex;justify-content: space-between;margin-top: 20px">
                      <div style="width: 50%">
                        <span style="font-weight: bold;">电量：</span>
                        <el-progress :percentage="props.row.percentage" :color="colors" style=""></el-progress>
                      </div>
                      <div style="width: 50%;margin-top: 0px;margin-left: 120px">
                        <span style="font-weight: bold;">上次停用时间：</span>
                        <el-time-picker style="margin-top: 0px" disabled></el-time-picker>
                      </div>
                    </div>

                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" prop="id"></el-table-column>
            <el-table-column label="设备类型" prop="type"></el-table-column>
            <el-table-column label="设备编号" prop="deviceId"></el-table-column>
            <el-table-column label="位置" prop="position"></el-table-column>
            <el-table-column label="操作" min-width="150px">
              <template>
                  <el-button type="primary" size="small">启用</el-button>
                  <el-button type="danger" size="small">停用</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 5px"></el-pagination>
        </el-card>
      </div>

<!--      <el-dialog
        title="修改设备信息"
        :modal-append-to-body="false"
        :visible.sync="deviceVisible"
        width="30%"
        style="padding: 150px">
        <el-form label-position="left">
          <el-form-item label="设备名称" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="设备详情" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
          <el-form-item label="设备位置" style="display: flex;justify-content: center">
            <el-input style=""></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button-group>
            <el-button @click="deviceVisible = false">取 消</el-button>
            <el-button type="primary" @click="deviceVisible = false">确 定</el-button>
          </el-button-group>
        </div>
      </el-dialog>-->
    </div>
</template>

<script>
  import LineHistogram from "../../components/charts/LineHistogram";
  import AnnualPie from "../../components/charts/AnnualPie";
  import Header from "../../components/Header";
  export default {
    name: "Equipment",
    components:{Header, AnnualPie, LineHistogram},
    data(){
      return{
        position:{
          secondTitle:'操作管理',
          thirdTitle:'设备管理'
        },
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        lineHistogramTestData:[
          {
            name: '运行设备',
            type: 'line',
            color: '#91cc75',
            data: [22, 75, 164, 225, 125, 176, 149, 101, 32, 45, 15, 72]
          },
          {
            name: '停用设备',
            type: 'line',
            color: '#5470c6',
            data: [22, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2]
          },
        ],
        pieData:[
          {value: 1048, name: '运行设备'},
          {value: 735, name: '停用设备'},
        ],
        current:39,
        online:23,
        offline:16,

        deviceVisible:false,

        testData:[
          {
            class:'货车',
            type:'VS-23',
            id:'113565',
            position:'风动机',
            deviceId: 'AD-19681',
          },
          {
            class:'货车',
            type:'BT-19',
            id:'156652',
            position:'发电机',
            deviceId: 'NE-18451',
          },
          {
            class:'货车',
            type:'BD-35',
            id:'112568',
            position:'机舱',
            deviceId: 'FG-13654',
          },
        ],
        testDat0a:[
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          },
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          },
          {
            id:'1919810',
            type:'装甲车',
            deviceId:'114514',
            position:'底盘',
            percentage:50,
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .bodyDiv{
    display: flex;
  }
  .left{
    width: 55%;
  }
  .right{
    width: 100%;
    margin-left: 10px;
  }
</style>
